import * as React from 'react';
import {
    Text, View, TextInput, StyleSheet, Image,
    TouchableOpacity, ScrollView,
} from 'react-native';
import {WebView} from 'react-native-webview';
import MeItem from "./MeItem"
import Icon from  "./Icon"
export default class Me extends React.Component {
    constructor(props){
        super(props)
        this.state ={
            switchStatus:true
        }
    }
    render() {
        return (
            <ScrollView style={styles.containerScrollview}>
                <View>
                    <View style={styles.headerTopViewStyle}>
                        <TouchableOpacity onPress = {() =>{
                            this.props.navigator.push({
                                component:Icon
                            })
                        }}>
                        <Image source={require('../../assets/qq.png')}
                               style={styles.headerImageStyle}/>
                        </TouchableOpacity>
                        <View>
                            <Text style={styles.headerFontStyle}>良品购物</Text>

                            <Image
                                source={require('../../assets/img/avatar_enterprise_vip.png')}
                                style={styles.headerVipImageStyle}/>

                        </View>
                        <Image source={require('../../assets/arrow_right.png')}
                               style={{ width: 20,
                                   height: 20,marginLeft: 20}}/>
                    </View>
                    <View style={styles.headerBottomViewStyle}>
                        {/*下面部分我们自定义的方法返回视图*/}
                        {this._renderHeaderBottomView()}
                    </View>

                </View>
                <TouchableOpacity onPress ={() =>{alert("我的信息")}}>
                <View style={{marginTop: 20}} >
                <MeItem name ="我的信息" pic={require('../../assets/close_blue.png')}/>
                </View>
                </TouchableOpacity>
                <View style={{marginTop: 10}}>
                <MeItem name ="优惠券" pic={require('../../assets/hotel.png')} titleName ={"3张"}/>
                <MeItem name ="课时消耗" pic={require('../../assets/img_home1.png')}/>
                </View>
                <View style={{marginTop: 10}}>

                    <MeItem name ="课时消耗" pic={require('../../assets/img_home1.png')}/>
                    <MeItem name ="我的订单" pic={require('../../assets/hotel.png')}/>
                    <MeItem name ="课时消耗" pic={require('../../assets/img_home1.png')}/>
                </View>
                <View style={{marginTop: 10}}>
                    <MeItem name ="我的订单" pic={require('../../assets/hotel.png')}/>
                    <MeItem name ="课时消耗" pic={require('../../assets/img_home1.png')}/>
                    <MeItem name ="课时消耗" pic={require('../../assets/img_home1.png')}/>
                </View>
            </ScrollView>
        );
    }
    _renderHeaderBottomView(){
        var itemArr = []
        var data = [
            {"name":"折扣券","number":"5"},
            {"name":"待评价","number":"4"},
            {"name":"待收货","number":"100"},
        ]
        for (var i = 0 ; i<data.length ;i++){
            itemArr.push(
                <View key={i}>
                    <Text style={{width:110,paddingLeft:30,color:'#FFF'}}>{data[i].name}</Text>
                    <Text style={{width:110,paddingLeft:30,color:'#FFF'}}>{data[i].number}</Text>
                </View>
            )
        }
        return itemArr;
    }
}
const styles = StyleSheet.create({
    headerBottomViewStyle:{
        flexDirection:'row',
        marginTop:-55,
        backgroundColor:'rgba(0,0,0,0.2)'
    },
    headerTopViewStyle:{
        backgroundColor: "#FF3C25",
        height:220,
        flexDirection:'row',
        alignItems:'center',
        paddingLeft: 40,

    },
    headerFontStyle: {
        fontSize: 18, color: '#FFF',
        fontWeight: '900', marginLeft: 15,
    },
    headerVipImageStyle: {
        width: 20,
        height: 20,marginLeft: 15,
    },
    headerImageStyle: {
        width: 70,
        height: 70,
        borderWidth: 3,
        borderRadius: 35,
    },
    containerScrollview: {
        backgroundColor: '#e8e8e8',
    },
});

module.exports = Me;
